<template>
    <ul class="l-box">
        <li class="l-item-li" v-for="item in listData" :key="item.areaId" @click.prevent="clickItem(item)">
            <div class="l-item">
                <div class="l-icon">></div>
                <div class="l-content">{{ item.areaName }}</div>
            </div>
            <recursion :listData="item.childList" />
        </li>
    </ul>
</template>

<script>
export default {
    name: 'recursion',
    props: {
        listData: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        clickItem (item) {
           if (item.childList.length) { // 如果当前节点不是末级节点，不执行任何操作
               return
           }
           alert(JSON.stringify(item))
        }
    }
}
</script>

<style lang="scss" scoped>
.l-box {
    &.first-level {
        >.l-item-li {
            margin-left: 0;
        }
    }
    .l-item-li {
        margin-left: 20px;
        .l-item {
            display: flex;            
        }
    }
}

</style>